<template>
  <div class="container">
    <el-container>
        <el-aside width="250px" class="aside">
          <Sidebar />
        </el-aside>
        <el-container class="content">
          <el-header class="header">
          <Headbar />
        </el-header>
        <el-main class="main">
          <AppMain />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
  import Sidebar from '@/layout/Sidebar.vue'
  import Headbar from '@/layout/Headbar.vue'
  import AppMain from '@/layout/AppMain.vue'
</script>
<style scoped>
.container {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}


.content {
  display: flex;
  height: 100vh; 
  flex: 1;
}

.aside {
  height: 100%;
}

.header {
  height: 60px;
  margin: 0;
  padding: 0;
}

.main {
  height: calc(100vh - 60px);
  margin: 0;
  padding: 0;
  flex: 1; /* 剩余空间由 main 占据 */
  overflow-y: auto; /* 允许垂直滚动 */
  overflow-x: hidden; /* 隐藏水平滚动条 */
  box-sizing: border-box;
}

/* 自定义滚动条样式 - 隐藏滚动条但保持功能 */
.main::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.main::-webkit-scrollbar-track {
  background: transparent; /* 轨道背景透明 */
}

.main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0); /* 默认透明 */
  border-radius: 4px;
}

.main:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3); /* 鼠标悬停时显示 */
  transition: background 0.3s;
}

.main::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5); /* 滚动条悬停时更明显 */
}
</style>